<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 可以简单记忆法:  

        通配符和  继承 权重为0，0，0，0, 

        这个是最低的，不管父元素的权重多高，子元素得到的权重永远是0

        标签选择器为         0，0，0，1,
        类(伪类)选择器为     0，0，1，0
        id选择器             0，1，0，0, 
        行内样式表为         1，0，0，0, 
        !important 无穷大. 
    
    如果是复合选择器，权重虽然会叠加，但永远不会有进位，例如0，0，0，10 的权重比0，0，1，0 要小
    -->
    <style>
        /* 标签选择器 */
        div {
            color: lawngreen;
        }

        /* 类选择器 */
        .nav {
            color: rgb(255, 0, 0);

        }

        /* id选择器 */
        #demo {
            color: mediumblue;
        }

        /* !important   权重最大*/
        div {
            color: orchid !important;
        }
    </style>
</head>

<body>
    <div class="nav" id=demo style="color: rgb(174, 255, 0);">
        帅气逼人
    </div>

</body>

</html>